<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>循环结构</title>
	<body>
		<div id="app">
	       <!-- 数组用法 队列/栈 push 压栈 pop 弹栈
		    push() 在最后追加元素
			pop() 从最后删除元素
			shift() 从开头删除元素 出现笔试题
			unshift() 从开头追加元素
			splice() 替换元素
			sort() 按照字符的编码顺序排列
			reverse() 数组反转
		   -->
		   <!-- 数据进行循环遍历-->
		   <input type="text" v-model.number="num"/>
		   <span v-for="item in array">{{item}}</span>
		   <button @click="push">push</button>
		   <button @click="splice1">splice</button>
		   <button @click="splice2">splice2</button>
		   <button @click="splice3">splice3</button>
		   <button @click="splice4">splice4</button>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
		<script>
			const app = new Vue({
				el: '#app',
				data: {
			        array: [1,2,3,4,5],
					num: ''
				},
				methods: {
					push(){
						this.array.push(this.num)
					},
					splice1(){
						/* arg1:操作数据的起始位置 下标从0开始
						 arg2：操作的数量
						 arg3：替换后的值*/
						this.array.splice(0,1,this.num)
					},
					splice2(){
						/* arg1:操作数据的起始位置 下标从0开始
						 arg2：操作的数量
						 arg3：替换后的值*/
						this.array.splice(0,3,this.num)
					},
					splice3(){
						/* arg1:操作数据的起始位置 下标从0开始
						 arg2：操作的数量
						 arg3：替换后的值*/
						this.array.splice(0,3,this.num,this.num,this.num)
					},
					splice4(){
						/* arg1:操作数据的起始位置 下标从0开始
						 arg2：操作的数量
						 arg3：替换后的值*/
						this.array.splice(1,1)
					},
				}
			}) 
		</script>
	</body>
</html>>